<template>
  <view>
    <view class="chat_box">
      <view class="chat_list">
        <view v-for="(chatVo, index) in chatVoList" :key="index">
          <view class="my-chat" v-if="chatVo.simpleUserVo.userId === userId">
            <view class="name-message">
              <view class="name">{{ chatVo.simpleUserVo.userName }}</view>
              <view class="message">{{ chatVo.messageContent }}</view>
            </view>
            <image class="avatar" :src="chatVo.simpleUserVo.avatar" />
          </view>
          <view class="his-chat" v-else>
            <image class="avatar" :src="chatVo.simpleUserVo.avatar" />
            <view class="name-message">
              <view class="name">{{ chatVo.simpleUserVo.userName }}</view>
              <view class="message">{{ chatVo.messageContent }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="send_box">
        <view class="write-message" ref="writeMessage">
          <textarea
            v-model="messageContent"
            placeholder="发送聊天信息"
            maxlength="5000"
            ref="messageInput"
            auto-height
            @input="adjustHeight('messageInput')"
          ></textarea>
          <button class="send-btn" @click="sendMessage">发送</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userId: uni.getStorageSync("userId"),
      theUserId: "",
	  theUserName: "",
      chatVoList: [],
      messageContent: "",
    };
  },

  onLoad(options) {
    console.log("获取上个页面传过来的信息", options);
    this.theUserId = options.theUserId;
    this.theUserName = options.theUserName;
    this.getChatList();

    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: this.theUserName
    });
  },

  methods: {
    getChatList() {
      uni.$http
        .get(
          `/chat/getPrivateChat?userId=${this.userId}&theUserId=${this.theUserId}`
        )
        .then((res) => {
          const responseData = res.data;
          console.log("获取私聊信息", responseData);
          if (responseData.code === 200) {
            this.chatVoList = responseData.data;
          }
        })
        .catch((err) => {
          console.error("获取私聊信息失败:", err);
        });
    },

    sendMessage() {
      uni.hideLoading();
      if (this.messageContent.trim() === "") {
        uni.showToast({
          title: "内容不能为空！",
          icon: "none",
        });
        return;
      }
      uni.$http
        .post("/chat/sendPrivateMessage", {
          userId: this.userId,
          theUserId: this.theUserId,
          content: this.messageContent,
        })
        .then((res) => {
          const responseData = res.data;
          console.log("发送信息", responseData);
          if (responseData.code === 200) {
            this.messageContent = "";
            this.getChatList();
          } else {
            console.log("发送失败", responseData);
            uni.showToast({
              title: "发送失败",
              icon: "none",
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          console.error("发送失败", err);
          uni.showToast({
            title: "发送失败",
            icon: "none",
            duration: 2000,
          });
        });
    },
    adjustHeight(refName) {
      this.$nextTick(() => {
        const element = this.$refs[refName];
        if (element) {
          element.style.height = "auto"; // 先重置高度
          element.style.height = element.scrollHeight + "px"; // 重新调整高度
        }

        const messageInput = this.$refs.messageInput;
        const writeMessage = this.$refs.writeMessage;
        if (messageInput && writeMessage) {
          messageInput.style.height = "auto"; // 先重置高度
          messageInput.style.height = messageInput.scrollHeight + "px"; // 重新设置textarea高度

          // 根据textarea的高度设置write-message的最小高度
          writeMessage.style.minHeight = messageInput.scrollHeight + 10 + "px";
        }
      });
    },
  },
};
</script>

<style lang="scss">
page {
  padding-bottom: 43px;
  background-color: #eeedf1;
}

.write-message {
  background-color: #f3f2f7;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 50px; // 设置最小高度，防止过小
  max-height: 200px; // 防止输入内容过多导致占满屏幕
  z-index: 1000; // 确保按钮在最上层
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.171);
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .send-btn {
    width: 15vw;
    height: 34px;
    display: flex;
    margin-right: 0;
    margin-left: 10px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fbd269;
    color: #ffffff;
  }

  textarea {
    max-height: 175px;
    width: 70vw;
    padding: 7px 10px;
    border-radius: 10px;
    background-color: #fdfcfd;
    border: 1px solid rgb(213, 213, 213);
    overflow-y: hidden;
  }
}

.chat_list {
  padding: 15px 10px;
}

.my-chat {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end; /* 整个聊天框靠右 */
  align-items: flex-start; /* 确保头像和消息对齐 */
  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-left: 10px; /* 添加左边距，避免头像紧贴消息 */
  }

  .name-message {
    padding-top: 3px;
    max-width: 70%; /* 限制消息的最大宽度，防止过长 */
    display: flex;
    flex-direction: column; /* 让 name 和 message 垂直排列 */
    align-items: flex-end; /* 让 name 和 message 都靠右 */
    .name {
      font-size: 12px;
      color: #656565;
      margin-bottom: 4px; /* 间距 */
    }
    .message {
      background-color: #fbd269;
      padding: 8px 12px;
      border-radius: 10px;
      max-width: 100%; /* 确保消息不会超出容器 */
    }
  }
}

.his-chat {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start; /* 整个聊天框靠右 */
  align-items: flex-start; /* 确保头像和消息对齐 */
  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px; /* 添加左边距，避免头像紧贴消息 */
  }

  .name-message {
    padding-top: 3px;
    max-width: 70%; /* 限制消息的最大宽度，防止过长 */
    display: flex;
    flex-direction: column; /* 让 name 和 message 垂直排列 */
    align-items: flex-start; /* 让 name 和 message 都靠右 */
    .name {
      font-size: 12px;
      color: #656565;
      margin-bottom: 4px; /* 间距 */
    }
    .message {
      background-color: #fbd269;
      padding: 8px 12px;
      border-radius: 10px;
      max-width: 100%; /* 确保消息不会超出容器 */
    }
  }
}
</style>